<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天猫</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    #one{
        border: 1px solid;
        width: 1920;
        height: 1920px;
        background-color: rgb(250, 226, 226);
    }
    #one_1 {
        width: 80%;
        height: 150px;
        margin: 0 auto;
       
    }
    #one_1 img {
        width: 19%;
        height: 120px;
        margin-top: 40px;
    }
    #one_1 img {
        cursor: pointer;
    }
    /* #one img{
      width: 236px;
      height: 88px;
      margin-left: 20px;
    } */
    .div_1 {
        width: 100%;
        height: 40px;
        border: 1px solid white;
        background-color: yellow;
    }
    .div_11 {
        font-family: 楷体;
        font-size: 13px;
        line-height: 35px;
        margin-left: 50px;
    }
    .div_11 a {
        margin-left: 50px;
    }
    .div_12 {
        font-family: 楷体;
        font-size: 13px;
        line-height: 35px;
        text-align: right;
        margin-left: -200px;
        margin-top: -34px;
    }
    .div_12 a {
        margin-left: 30px;
    }
    .div_u{
        width: 1000px;
        height: 200px;
        border: 0px solid rebeccapurple;
        margin: 0 auto;
        margin-top: 50px;
    }
    .input{
        text-align: center;
        margin-top: -50px;
    }
    .input input{
        border-top: 1px solid red;
        border-right: 1px solid red;
        border-bottom: 1px solid red;
        border-left: 1px solid red;
    }
    .shenti{
        border: 1px solid white;
        width: 1200px;
        height: 700px;
        margin: 0 auto;
        margin-top: -100px;
        border-radius: 15px 15px 0px 0px;
        background-color: white;
        
    }
    .zuo{
 
        width: 250px;
        height: 600px;
        margin: 30px;
        margin-top: 20px;
        font-size: 18px;
    }
    .shang{

        width: 1150px;
        height: 50px;
        margin:25px;
  
    }
    .zhong{
        border: 0px solid;
        width:500px ;
        height: 600px;
        margin-top: -630px;
        margin-left: 300px;
    }
    .you{
        border: 0px solid;
        width:350px ;
        height: 480px;
        margin-left: 805px;
        margin-top: -600px;
        background-color: rgb(226, 250, 250);
    }
    .yi{
        margin-left: 20px;
    }
   
    .yi a{
        letter-spacing: 0.6em;
        text-decoration: none;
        color: rgb(168, 160, 158);
    }
    .fenlei{
        color: red
    }
   .img1{
    width: 80px;
    height: 50px; 
    /* float: left; */
    /* box-sizing: border-box; */
   }
  .shang a{
      font-size: 13px;
    padding: 5px;
    line-height: 20px;
    /* float: left; */
    /* margin-top: 20px; */
      /* text-align: center; */
  }
.shang *{
  /* margin-top: 5px; */
}
.sd a:hover{
    cursor: pointer;
    color: royalblue;
}
.zhong_1{
    width: 500px;
    height: 300px;
    border: 0px solid red;

}
.zhong img:hover{
    cursor: pointer;
}
.you img:hover{
    cursor: pointer;

}
.you span:hover{
    cursor: pointer;
    color: royalblue;
}
</style>
<body>
    <div id="one">
        <div class="div_1">
            <div class="div_11">
                <a href="">天猫首页</a>
                <a href="">喵,欢迎来天猫</a>
                <a href="">请登录</a>
                <a href="">免费注册</a>
            </div>
            <div class="div_12">
                <a href="">我的淘宝</a>
                <a href="">购物车</a>
                <a href="">收藏夹</a>
                <a href="">手机版</a>
                <a href="">淘宝网</a>
                <a href="">商家支持</a>
            </div>
        </div>
        <div id="one_1">
            <a href="http://127.0.0.1:5500/%E6%93%8D%E5%9C%BA.html"><img
                    src="images/O1CN01EmavO81DjuvR3gk1X_!!6000000000253-2-tps-236-88.png" alt=""></a>
            <a href="http://127.0.0.1:5500/01.html"><img
                    src="images/O1CN01eRfYZw2134fMb4SxZ_!!6000000006928-2-tps-236-88.png" alt=""></a>
            <a href="http://127.0.0.1:5500/02.html"><img
                    src="images/O1CN01l7XGBS1M5usQVhtoz_!!6000000001384-2-tps-236-88.png" alt=""></a>
            <a href="http://127.0.0.1:5500/03.html"><img
                    src="images/O1CN01wiCFmr1pGYwMbdQIu_!!6000000005333-2-tps-236-88.png" alt=""></a>
            <a href="http://127.0.0.1:5500/bady.html"><img
                    src="images/O1CN01thKc9g1VBG2KtclQh_!!6000000002614-2-tps-236-88.png" alt=""></a>
        </div>
        <div class="div_u">
            <img src="images/download.png" alt="" style="width: 80px; height: 65px;">
            <div class="input">
                <input type="text" name="" id="" placeholder="搜索 天猫 商品/品牌/店铺" 
                    style="width: 600px;height: 30px;border-radius: 15px;">
                <input type="button" value="搜索"
                 style="width: 70px;height: 34px;border-radius: 15px; margin-left: -77px;
                 background-color: red;">
            </div>
        </div>
        <div class="shenti">
                    

            <div class="shang">  
                <!-- <a href=""></a>             -->
                <img class="img1" src="1.jpg" style="float: left;margin-left: 20%; width: 100px;height: 30px;">
                <img class="img1" src="2.jpg"style="float: left; width: 100px;height: 30px; ">
                    <div class="sd">
                        <a>天猫会员</a>
                        <a>喵鲜生</a>
                        <a>医药馆</a>
                        <a>魅力惠</a>
                        <a>飞猪旅行</a>
                        <a>苏宁易购</a>
                        <a>天猫内容</a>
                    </div>                                                        
            <div class="zuo">                
                <div class="yi">
                    <a href="">女装</a>
                    <a href="">/</a>
                    <a href="">内衣</a>
                </div>
                <div class="yi">
                    <a href="">男装</a>
                    <a href="">/</a>
                    <a href="">运动户外</a>
                </div>
                <div class="yi">
                    <a href="">女鞋</a>
                    <a href="">/</a>
                    <a href="">男鞋</a>
                    <a href="">/</a>
                    <a href="">箱包</a>
                </div>
                <div class="yi">
                    <a href="">美妆</a>
                    <a href="">/</a>
                    <a href="">个人护理</a>
                </div>
                <div class="yi">
                    <a href="">腕带</a>
                    <a href="">/</a>
                    <a href="">眼镜</a>
                    <a href="">/</a>
                    <a href="">珠宝饰品</a>
                </div>
                <div class="yi">
                    <a href="">手机</a>
                    <a href="">/</a>
                    <a href="">数码</a>
                    <a href="">/</a>
                    <a href="">电脑办公</a>
                </div>
                <div class="yi">
                    <a href="">母婴玩具</a>
                </div>
                <div class="yi">
                    <a href="">零食</a>
                    <a href="">/</a>
                    <a href="">茶酒</a>
                    <a href="">/</a>
                    <a href="">进口食品</a>
                </div>
                <div class="yi">
                    <a href="">生鲜水果</a>
                </div>
                <div class="yi">
                    <a href="">大家电</a>
                    <a href="">/</a>
                    <a href="">生活电器</a>
                </div>
                <div class="yi">
                    <a href="">家具</a>
                    <a href="">/</a>
                    <a href="">灯具</a>
                    <a href="">/</a>
                    <a href="">卫浴</a>
                </div>
                <div class="yi">
                    <a href="">汽车</a>
                    <a href="">/</a>
                    <a href="">配件</a>
                    <a href="">/</a>
                    <a href="">用品</a>
                </div>
                <div class="yi">
                    <a href="">家纺</a>
                    <a href="">/</a>
                    <a href="">家饰</a>
                    <a href="">/</a>
                    <a href="">鲜花</a>
                </div>
                <div class="yi">
                    <a href="">医药保健</a>
                </div>
                <div class="yi">
                    <a href="">厨具</a>
                    <a href="">/</a>
                    <a href="">收纳</a>
                    <a href="">/</a>
                    <a href="">宠物</a>
                </div>
                <div class="yi">
                    <a href="">图书音像</a>
                </div>
            </div>           
            <div class="zhong">
                <img src="6.jpg" alt="">
                <div class="zhong_1">
                    <img src="4.jpg" alt="" style="width: 250px;height: 250px;">
                    <img src="7.jpg" alt="" style="width: 250px;height: 250px;float: right;">
                </div>
            </div>
            <div class="you">
                <div>
                    <img src="8.jpg" alt="" style="width: 80px;height: 80px;border-radius: 150px;margin-left: 130px;padding: 10px;">
                    <p style="font-family: 楷体; text-align: center;margin-left: 8px;"> Hi,你好</p>
                </div>
                <div style="position: absolute;" class="div_33">
                    <img src="9.jpg" alt="" style="width: 348px;height: 141px;margin-top: 30px; border-radius: 10px;">
                    <br>
                    &emsp;<span>公告</span>&emsp;<span>新鲜事儿都在这里-</span>
                    <br>
                    <br>
                    &emsp;<span>热点</span>&emsp;<span>设计创享家3D色子服务大赛来袭！</span>
                    <br>
                    <br>
                    &emsp;<span>热点</span>&emsp;<span>全球新发现，好物开枪就现在!</span>
                    <br>
                    <br>
                    &emsp;<span>热点</span>&emsp;<span>万款新品流行速递抢先看</span>
                </div>

            </div>
        </div>
    </div> 

</body>
</html>